<template>
  <div class="global-container">
    <Atable :tableData="tableData" :tableModel="tableModel">
      <template #viewPic="{ row }">
        <i
          class="el-icon-s-order"
          style="font-size: 24px"
          @click="viewPic(row)"
        ></i>
      </template>
      <template #actions="{ row }">
        <el-button @click="onApply(row)" type="primary" size="small"
          >处理</el-button
        >
      </template>
    </Atable>
    <PageSize
      ref="pageSize"
      :total="searchData.total"
      :pageNum="searchData.pageNo"
      :pageSize="searchData.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog :visible.sync="dialogVisible" top="60px" width="600px">
      <img width="100%" :src="dialogSrc" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import Atable from '@/components/Table/Atable';
import PageSize from '@/components/PageSize/PageSize';
import businessApi from '@/api/business';
import apply from '@/assets/js/apply';
export default {
  components: {
    Atable,
    PageSize,
  },
  data() {
    return {
      // search, page params
      searchData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      // records
      tableData: [],
      // table fields
      tableModel: [
        {
          prop: 'code',
          label: '事项编号',
          render: (row) => apply.applyCode[row.bussType],
        },
        {
          prop: 'name',
          label: '事项名称',
          width: '350px',
          render: (row) => apply.applyName[row.bussType],
        },
        {
          prop: 'createTime',
          label: '创建时间',
        },
        {
          prop: 'status',
          label: '审核状态',
          render: () => '未提交',
        },
        {
          prop: 'viewPic',
          label: '查看流程图',
          slot: 'viewPic',
        },
        {
          prop: 'actions',
          label: '操作',
          slot: 'actions',
        },
      ],
      // dialog
      dialogVisible: false,
      dialogSrc: null,
    };
  },
  created() {
    //获取列表
    this.getTable();
  },
  methods: {
    async getTable() {
      let params = {
        ...this.searchData,
        // 未提交
        status: 0,
      };
      const { records, total } = await businessApi.getStepsList(params);
      this.tableData = records || [];
      this.searchData.total = total;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getTable();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.searchData.pageNo = val;
      this.getTable();
    },
    // 查看流程图
    viewPic(row) {
      const obj = {
        5: require('@/assets/img/step/step5.png'),
        6: require('@/assets/img/step/step6.png'),
      };
      this.dialogSrc = obj[+row.bussType];
      this.dialogVisible = true;
    },
    // 处理
    onApply(row) {
      this.$router.push({
        path: '/companyApplyStep',
        query: {
          id: row.id,
          bussType: row.bussType,
          userId: row.userId,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
